<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Apple</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/sm.css">
    <link rel="stylesheet" href="css/md.css">
    <link rel="stylesheet" href="css/lg.css">
</head>

<body>
    <header style="">
    	<div class="cover" style=""></div>
        <nav>
            <ul class="menu-list clear">
                <li class="logo no-border"><a href="#"></a></li>
                <li><a href="#">Mac</a></li>
                <li><a href="#">iPad</a></li>
                <li><a href="#">iPhone</a></li>
                <li><a href="#">Watch</a></li>
                <li><a href="#">TV</a></li>
                <li><a href="#">Music</a></li>
                <li class="no-border"><a href="#">Support</a></li>
                <li class="search no-border"><a href="#"></a></li>
                <li class="lock no-border"><a href="#"></a></li>
            </ul>
        </nav>
        <div class="sm-nav clear">
        	<div class="menu"><a href="#"></a></div>
        	<div><a href="javascript:;"></a></div>
        	<div><a href="javascript:;"></a></div>
        </div>
    </header>
	
	<!-- slide -->
	<article class="slide">
		<!-- <div class=""> -->
			<ul class="slide-box">
				<li id="l1">
					<a href="javascript:;"></a>
				</li>
				<li id="l2"><a href="javascript:;">
					<a href="javascript:;"></a>
				</li>
				<li id="l3"><a href="javascript:;">
					<a href="javascript:;"></a>
				</li>
				<li id="l4"><a href="javascript:;">
					<a href="javascript:;"></a>
				</li>
				<li id="l5"><a href="javascript:;">
					<a href="javascript:;"></a>
				</li>
			</ul>
			<ul class="dots">
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<div class="btn">
				<span class="prev"><</span>
				<span class="next">></span>
			</div>
		<!-- </div> -->
	</article>
	
	<!-- 中间图片 -->
	<ul class="pic clear">
		<li><a href="javascript:;"></a></li>
		<li><a href="javascript:;"></a></li>
		<li><a href="javascript:;"></a></li>
		<li><a href="javascript:;"></a></li>
	</ul>

	<!-- American Red Cross -->
	<div class="donate">
		<p class="p1"><a href="javascript:;"></a></p>
		<p class="p2">&nbsp;&nbsp;&nbsp;&nbsp;Louisiana Flood and Central Italy <span>Earthquake Relief </span><a href="javascript:;">Donate to help&gt;</a></p>
	</div>

	<footer>
		<section>
			<div class="clear">
				<div class="sec">
					<dl>
						<dt>shop and Learn<span>+</span></dt>
						<dd><a href="javascript:;">Mac</a></dd>
						<dd><a href="javascript:;">iPad</a></dd>
						<dd><a href="javascript:;">iPhone</a></dd>
						<dd><a href="javascript:;">Watch</a></dd>
						<dd><a href="javascript:;">TV</a></dd>
						<dd><a href="javascript:;">Music</a></dd>
						<dd><a href="javascript:;">iTunes</a></dd>
						<dd><a href="javascript:;">iPod</a></dd>
						<dd><a href="javascript:;">Accessories</a></dd>
						<dd><a href="javascript:;">Gift Cards</a></dd>
					</dl>
				</div>
				<div class="sec">
					<dl>
						<dt>Apple Store<span>+</span></dt>
						<dd><a href="javascript:;">Find a Store</a></dd>
						<dd><a href="javascript:;">Genius Bar</a></dd>
						<dd><a href="javascript:;">workshops and Learning</a></dd>
						<dd><a href="javascript:;">Youth Programs</a></dd>
						<dd><a href="javascript:;">Apple Store App</a></dd>
						<dd><a href="javascript:;">Refurbished</a></dd>
						<dd><a href="javascript:;">Financing</a></dd>
						<dd><a href="javascript:;">Reuse and Recycling</a></dd>
						<dd><a href="javascript:;">Order Status</a></dd>
						<dd><a href="javascript:;">Shopping Help</a></dd>
					</dl>
				</div>
				<div class="sec">
					<dl>
						<dt>Apple Store<span>+</span></dt>
						<dd><a href="javascript:;">Apple and Education</a></dd>
						<dd><a href="javascript:;">Shop for College</a></dd>
					</dl>
					<dl>
						<dt>For Business<span>+</span></dt>
						<dd><a href="javascript:;">Apple and Business</a></dd>
						<dd><a href="javascript:;">Shop for Business</a></dd>
					</dl>
				</div>
				<div class="sec">
					<dl>
						<dt>Account<span>+</span></dt>
						<dd><a href="javascript:;">Manage Your Apple ID</a></dd>
						<dd><a href="javascript:;">Apple Store Account</a></dd>
						<dd><a href="javascript:;">iCloud.com</a></dd>
					</dl>
					<dl>
						<dt>Apple Values<span>+</span></dt>
						<dd><a href="javascript:;">Accessibility</a></dd>
						<dd><a href="javascript:;">Education</a></dd>
						<dd><a href="javascript:;">Environment</a></dd>
						<dd><a href="javascript:;">Inclusion and Diversity</a></dd>
						<dd><a href="javascript:;">Privacy</a></dd>
						<dd><a href="javascript:;">Supplier Responsibility</a></dd>
					</dl>
				</div>
				<div class="sec">
					<dl class="no-border">
						<dt>About Apple<span>+</span></dt>
						<dd><a href="javascript:;">Apple info</a></dd>
						<dd><a href="javascript:;">Newsroom</a></dd>
						<dd><a href="javascript:;">Job Opportunities</a></dd>
						<dd><a href="javascript:;">Press Info</a></dd>
						<dd><a href="javascript:;">Investors</a></dd>
						<dd><a href="javascript:;">Events</a></dd>
						<dd><a href="javascript:;">Contact Apple</a></dd>
					</dl>
				</div>
			</div>
			<p class="note">More ways to shop: Visit an <a href="javascript:;">Apple Store</a>, call 1-800-MY-APPLE, or <a href="javascript:;">find a reseller</a>.</p>
			<div class="link">
				<span>Copyright © 2016 Apple Inc. All rights reserved.</span>
				<span class="site">
					<a href="javascript:;">Privacy Policy</a>
					<a href="javascript:;">Terms of Use</a>
					<a href="javascript:;">Sales and Refunds</a>
					<a href="javascript:;">Legal</a>
					<a href="javascript:;">Site Map</a>
				</span>
				<!-- <a class="us" href="javascript:;">United States</a> -->
			</div>
		</section>
	</footer>

	<script src="js/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <!-- <script src="js/bootstrap.min.js"></script> -->
</body>

</html>
